<!--
 * @Author: benchenchuang benchenchuang
 * @Date: 2023-10-14 21:31:23
 * @LastEditors: benchenchuang benchenchuang
 * @LastEditTime: 2023-10-15 16:04:33
 * @FilePath: /hmp-web/src/views/components/staff-group/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="roleManage-wrapper">
        <div class="flex-row">
            <div class="flex_side">
                <a-card :bordered="true">
                    <div class="side_box flex-column">
                        <a-spin v-if="loading" style="margin-top:30px;" />
                        <template v-else>
                            <template v-if="departData.length">
                                <a-tree
                                    :tree-data="departData"
                                    :defaultSelectedKeys="[deptId]"
                                    :auto-expand-parent="autoExpandParent"
                                    :replaceFields="replaceFields"
                                    :expanded-keys="expandedKeys"
                                    @expand="onExpand"
                                    >
                                    <template slot="title" slot-scope="item">
                                        <div class="dept_item flex-row">
                                            <div class="dept_name" @click="selectedDept(item)">
                                                <a-tooltip>
                                                    <template slot="title">{{item.deptName}}</template>
                                                    <span v-if="item.deptName.indexOf(form.deptName) > -1">
                                                    {{ item.deptName.substr(0, item.deptName.indexOf(form.deptName)) }}
                                                    <span style="color: #f50">{{ form.deptName }}</span>
                                                    {{ item.deptName.substr(item.deptName.indexOf(form.deptName) + form.deptName.length) }}
                                                    </span>
                                                    <span v-else>{{ item.deptName }}</span>
                                                </a-tooltip>
                                            </div>
                                        </div>
                                    </template>
                                </a-tree>
                            </template>
                            <a-empty v-else />
                        </template>
                    </div>
                </a-card>
            </div>
            <div class="flex_list">
                <staff-list :group="group" class="staff_list" ref="user" @selection="selectionTable" :isConcise="true" :isSelection="true" :isSearch="false" :params="{'deptId':deptId}"></staff-list>
            </div>
    
        </div>
    </div>
</template>

<script>
import table from '@/mixins/table';
import { remoteList,deleteInfo } from '@/api/system/dept';
import StaffList from '@/views/staff/group'
import {getCache} from '@/utils/session'

export default {
    name: 'StaffGroup',
    mixins:[table],
    components: { StaffList },
    props:{
        group:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        let originForm = {
            deptName:''
        }
        return {
            originForm,
            form:{
                ...originForm
            },
            departData:[],
            expandedKeys:['-1'],
            dataList:[],
            replaceFields:{
                children:'children',
                title:'deptName',
                key:'deptId',
                value: 'deptId' 
            },
            autoExpandParent: true,
            deptId:'',
        };
    },
    created(){
        this.search(1)
    },
    methods: {
        //选择人员变化
        selectionTable(e){
            this.$emit('selected',e)
        },
        //查询
        async search() {
            try {
                this.loading = true;
                this.list = [];
                let userInfo = getCache('userInfo') || { userId: '' };
                let { userId } = userInfo;
                let res = await remoteList({userId});
                let { data } = res;
                this.generateList(data)
                this.departData = [
                    {
                        deptName:'浙江交工集团',
                        key:'zj_group',
                        deptId:'-1',
                        parentId:'-2',
                        children:[
                            ...data
                        ]
                    }
                ]
                // if(data && data.length){
                //     this.deptId = '-1';
                // }
            } finally {
                this.loading = false;
            }
        },
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onChangeSearch(e){
            const value = e.target.value;
            const expandedKeys = this.dataList.map(item => {
                if (item.deptName.indexOf(value) > -1) {
                    return this.getParentKey(item.key, this.departData);
                }
                return null;
            }).filter((item, i, self) => item && self.indexOf(item) === i);
                this.form.deptName = value;
                this.autoExpandParent = true;
                this.expandedKeys = expandedKeys;
        },
        generateList(data){
            for (let i = 0; i < data.length; i++) {
                const node = data[i];
                const {deptId,deptName} = node;
                this.dataList.push({ key:deptId, deptName: deptName });
                if (node.children){
                    this.generateList(node.children);
                }
            }
        },
        getParentKey(key, tree){
            let parentKey;
            for (let i = 0; i < tree.length; i++) {
                const node = tree[i];
                if (node.children) {
                    if (node.children.some(item => item.deptId === key)) {
                        parentKey = node.deptId;
                    } else if (this.getParentKey(key, node.children)) {
                        parentKey = this.getParentKey(key, node.children);
                    }
                }
            }
            return parentKey;
        },
        //选择部门名称
        selectedDept(item){
            this.deptId = item.deptId;
        }
    },
};
</script>
<style lang="scss" scoped>
.dept_item{
    align-items: center;
    .dept_name{
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
::v-deep{
    .ant-card-body{
        padding: 5px 20px;
    }
    .ant-tree li .ant-tree-node-content-wrapper{
        width: 100%;
        height: 32px;
        line-height: 32px;
    }
}
.flex_side{
    margin-right: 20px;
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    .side_box{
        .side_item{
            display: flex;
            align-items: center;
            padding: 0 10px;
            margin: 2px 0;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #666;
            border-radius: 4px;
            cursor: pointer;
            .name{
                flex: 1;
            }
            .icon{
                margin-left: 10px;
                font-size: 16px;
            }
            &:hover{
                color: #fff;
                background: rgba($color: $primary-color, $alpha: .7);
            }
            &.active{
                color: #fff!important;
                background: $primary-color;
            }
        }
    }
}
.user_header{
    width: 100%;
    align-items: center;
    .title{
        flex: 1;
    }
}
.flex_list{
    flex: 1;
    width: 0;
    .staff_list ::v-deep{
        .ant-card-body{
            padding: 0;
        }
        .table_scroll{
            width: auto !important;
        }
    } 
}
</style>
